import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../../../../components/PublicHeader';
import { GET_APPCARD_DETAILS } from '../../../../../public/WebApi/myInfoDataInterface/userInfoListApi';
import fetchWebApi from '../../../../../public/WebApi/fetchBase';
import getStorageValue from '../../../../../utils/getStorageValue';
import { Constant } from '../../../../../public/js/constant';

export default class certificateDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "证件详情",
      certificateItem: '',
      certificateItem2: '',
      id: this.props.navigation.state.params.id,
      cardType: this.props.navigation.state.params.cardType,
      title: this.props.navigation.state.params.title
    };
  }

  componentDidMount = () => {
    this.appcard()
  }

  //添加证件
  async appcard() {
    const res = await fetchWebApi(GET_APPCARD_DETAILS, {
      token: await getStorageValue(Constant.TOKEN),
      id: this.state.id,
      cardType: this.state.cardType
    }, 'POST')
    console.log(res);
    if (res.status == 200) {
      this.setState({
        certificateItem: res.data[0].filePath,
        certificateItem2: res.data[1].filePath
      })
    }
  }

  render() {

    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
        />
        <ScrollView>
          <View style={styles.padlr}>
            {/* 证件提示文本 */}
            <Text style={styles.certificatesText}>{this.state.title}</Text>
            {/* 证件展示 */}
            <View style={styles.item}>
              <View style={styles.photoDisplayDetails}>
                <TouchableOpacity onPress={() => {
                  this.props.navigation.push('friendAvatar', {
                    friendAvatar: [{ url: this.state.certificateItem }]
                  })
                }}>
                  <Image
                    source={this.state.certificateItem == '' ? null : { uri: this.state.certificateItem }}
                    style={styles.img}
                  />
                </TouchableOpacity>

                <TouchableOpacity onPress={() => {
                  this.props.navigation.push('friendAvatar', {
                    friendAvatar: [{ url: this.state.certificateItem2 }]
                  })
                }}>
                  <Image
                    source={this.state.certificateItem2 == '' ? null : { uri: this.state.certificateItem2 }}
                    style={styles.img}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    backgroundColor: "rgb(245,245,245)",
    flex: 1,
  },
  padlr: {
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 20,
  },
  certificatesText: {
    color: "#444",
    fontSize: 18,
  },
  item: {
    flexDirection: "column",
    alignItems: "center",
  },
  photoDisplayDetails: {
    marginTop: 10,
    display: 'flex',
    flexDirection: 'column',
  },
  img: {
    width: 350,
    height: 200,
    marginTop: 30
  }
})